<template>
 <div id='app'>
    <div class="hed">
        <van-nav-bar
        title="城市选择"
        left-arrow
        @click-left="onClickLeft"
        />
    </div>
  <!-- <van-index-bar>
  <view>
    <van-index-anchor v-for="(item, index) in list" :key="index" index='`$(item.name)`' />
    <van-cell v-for="(itm,index) in item.content" title='`$(item.label)`' :key="index"/>
  </view>
</van-index-bar> -->
<van-index-bar>
  <div v-for="(item, index) in list" :key="index">
    <van-index-anchor :index='item.name'/>
   <van-cell v-for="(item1, index) in item.content" :key="index" :title="item1.label" @click='$router.push("/findhome?value="+item1.value+"&"+"name="+item1.label)'/>
  </div>
</van-index-bar>
 </div>
</template>

<script>
import {citylist} from '../api/user'
export default {
 data () {
 return {
    arr:['a','b','c','d','e','f','g','h','i',
    'j','k','l','m','n','o','p','q','r','s','t','y','v','w','x','y','z'],
    list:[]
   }
 },
created(){
    this.citylist()
},
 components: {},

 methods: {
    onClickLeft() {
      this.$router.back()
    },
    async citylist(){
        const {data:res}=await citylist(1)
        console.log(res);
        this.arr.forEach(item=>{
         const obj= res.body.filter((item1)=>{
            return item1.short.substring(0,1)===item
          })
          if(obj.length>0){
             this.list.push({
            name:item.toLocaleUpperCase(),
            content:obj
          })
          }
        })
        console.log(this.list);
    }
 }
}
</script>

<style scoped>
</style>